<template>
	<view class="container">
		<view>
			<BhTitle :titleText="titleText" :slotHeight="68">
				<BhTabbar :tabList="tabList" :currentTabIndex="currentTabIndex" @changeTab="changeTab"></BhTabbar>
			</BhTitle>
		</view>
		

		<!-- <view class="title_view" :style="'height:' + titleHeight + 'px;'">
			<view class="title bh-row bh-justify-space-between " :style="'height:' + titleHeight + 'px;padding-top:' + capsuleTop + 'px'">
				<view v-if="showRetIcon == true" class="left_arrow_box" @click="back">
					<image src="../../static/images/left_arrow.svg" mode=""></image>
				</view>
				<view v-else class="left_arrow_box">

				</view>
				<view class="edit-info">{{ titleText }}</view>
				<view class="" style="width: 80rpx;"></view>
			</view>
		</view> -->

		<!-- <BhTabbar :tabList="tabList" :currentTabIndex="currentTabIndex" @changeTab="changeTab"></BhTabbar> -->
		<view class="body-wrap">

			<view @click="toSellDetail(item.id)" v-if="currentTabIndex == 0" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
				<postItemMyCollectSell :item="item"></postItemMyCollectSell>
			</view>
			<view @click="toBuyDetail(item.id)" v-if="currentTabIndex == 1" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
				<postItemMyCollectBuy :item="item"></postItemMyCollectBuy>
			</view>
			<BhLoadMore :status="tabLoadingStatus" @click-load-more="()=>{}" ></BhLoadMore>
			<view style="padding-top: 60rpx;" v-if="currentTabIndex == 0 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0) && tabLoadingStatus != 'loading'">
				<bh-no-more></bh-no-more>
			</view>
			<view style="padding-top: 60rpx;" v-if="currentTabIndex == 1 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0) && tabLoadingStatus != 'loading'">
				<bh-no-more></bh-no-more>
			</view>
		</view>
	</view>
</template>

<script>
import {
	Api
} from '../../api/api'
import {
	Dict
} from '../../components/custom_views/dict'
import postItemMyCollectSell from '@/PostPage/post_item/post_item_my_collect_sell.vue'
import postItemMyCollectBuy from '@/PostPage/post_item/post_item_my_collect_buy.vue'
import BhTabbar from '../../components/custom_views/bh-tabbar.vue'
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import BhLoadMore from '../../components/custom_views/bh-load-more.vue';
import { bhTabMixin, commonMixin } from '../../components/custom_views/mixin'

export default {
	components: {
		postItemMyCollectSell,
		postItemMyCollectBuy,
		BhTabbar,
		bhNoMore,
		BhLoadMore
	},
	mixins: [commonMixin, bhTabMixin],
	data() {
		return {
			...bhTabMixin.initData(0),
			tabList: [
				{
					id: 1, name: '转铺',
					list: [],
					param: {
						pageNum: 1, pageSize: 10,
						postType: Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
					}
				},
				{
					id: 2, name: '找铺',
					list: [],
					param: {
						pageNum: 1, pageSize: 10,
						postType: Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value
					}
				},
			],
			// tabList: [
			// 	{
			// 		name: '转铺'
			// 	},

			// 	{
			// 		name: '找铺'
			// 	}
			// ],
			titleText: '我的足迹'
		}
	},
	computed: {
		sellList() {
			let that = this
			return that.collectList.filter(post => post.postType == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value)
		},
		buyList() {
			let that = this
			return that.collectList.filter(post => post.postType == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value)
		},
		images() {
			let images = []
			if (this.postDto.facadePicture) {
				images.push(this.postDto.facadePicture.split(','))
			}
			console.log('images图片信息', images)
			return images
		},
	},
	methods: {
		requestData(param) {
			return Api.FootprintsApi.list(param, false)
		},
		toSellDetail(id) {
			uni.navigateTo({
				url: '/PostPage/post_detail_sell/post_detail_sell?postId=' + id
			})
		},
		toBuyDetail(id) {
			uni.navigateTo({
				url: '/PostPage/post_detail_buy/post_detail_buy?postId=' + id
			})
		},

		// changeTab(changedIndex) {
		// 	console.log('改变tab标签', changedIndex)
		// 	let that = this
		// 	that.currentTabIndex = changedIndex
		// },
		// initApiData(options, completed = () => { }) {
		// 	let that = this
		// 	Api.FootprintsApi.list((res) => {
		// 		if (res.code == 200) {
		// 			that.collectList = res.data.records
		// 		}
		// 		completed()
		// 	})
		// },
	},
	onPullDownRefresh() {
		let that = this
		this.getTabData(that.currentTabIndex, 1, (res)=>{
			uni.stopPullDownRefresh()
		})
		// that.initApiData({}, () => {
		// 	uni.stopPullDownRefresh();
		// })
	},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad() {
		this.getTabData(0, 1)
	},
	onReachBottom(){
		this.scrolltolower()
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
	height: 100vh;
	background-color: #F5F9FA;
}

.container {
	background-color: #F5F9FA;
	width: 100%;
	// height: 100vh;
}

.header-wrap {
	// margin-top: 36rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	border-radius: 16rpx;
	padding: 8rpx;
	background: #ECF0F1;
	font-size: 36rpx;
	font-weight: 500;
	color: #333333;

	.header-item {
		padding: 22rpx 70rpx;
		border-radius: 16rpx;

		// background: #FFFFFF;
		text-align: center;
	}

	.header-item-ac {
		padding: 22rpx 70rpx;
		border-radius: 16rpx;

		background: #FFFFFF;
	}
}

.header1-wrap {
	margin-top: 16rpx;
	background: #FFFFFF;
	padding-left: 34rpx;
	padding-right: 34rpx;

	.header1-item {
		margin-top: 18rpx;
		margin-bottom: 18rpx;

		.header1-item-title {
			font-size: 32rpx;
			font-weight: normal;

			color: #666666;
		}

		.header1-item-icon {

			width: 0px;
			height: 0px;
			border: 10rpx solid transparent;
			border-top-color: #666666;
			margin-top: 10rpx;
			margin-left: 10rpx;

		}

		.header1-item-title-ac {
			font-size: 36rpx;
			font-weight: 600;

			color: #333333;

		}

		.header1-item-icon-ac {

			width: 0px;
			height: 0px;
			border: 10rpx solid transparent;
			border-top-color: #333333;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}
}

.body-wrap {}
</style>